const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production' // 是否为开发环境
/**
 * @description 处理 css、scss、less
 * @param {scss | less } pre
 */

const sassLoaderOptions = {
  // 引入 element-plus 的样式
  // additionalData: `@use "@/styles/element/index.scss" as *;`
}
const lessLoaderOptions = {
  lessOptions: {
    // 主题色文档：https://ant.design/docs/react/customize-theme-cn#Ant-Design-%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%8F%98%E9%87%8F
    // modifyVars: { '@primary-color': '#1DA57A' }, // 修改主题色
    javascriptEnabled: true // 启用 javascriptEnabled
  }
}
module.exports = function loaders(pre) {
  return [
    devMode ? 'style-loader' : MiniCssExtractPlugin.loader, // 将 CSS 插入到 DOM 中，通过创建 <style> 标签的方式将 CSS 应用到页面中。
    {
      loader: 'css-loader', // 负责解析并执行CSS的变量、函数等高级特性，如 @import 和 url()
      options: {
        modules: {
          auto: true, // 为所有匹配 /\.module\.\w+$/i.test(filename) 正则表达式的文件启用 CSS 模块。
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: ['postcss-preset-env']
          // 或者以下
          // config: path.resolve(__dirname, '../postcss.config.js')
        }
      }
    },
    pre && {
      loader: pre, // scss less
      options: pre === 'less-loader' ? lessLoaderOptions : {}
    }
  ].filter(Boolean)
}
